<template>
  <div class="accountadd">
    <h3>添加账号</h3>
    <hr />
    <form>
      <p>
        <span>账号</span>
        <el-input
          placeholder="账号"
          v-model="user"
          clearable
          style="width: 300px"
        >
        </el-input>
      </p>
      <p>
        <span>密码</span>
        <el-input
          placeholder="请输入密码"
          v-model="pwd"
          show-password
          style="width: 300px"
        ></el-input>
      </p>
      <p>
        <span>用户组</span>
        <el-select v-model="group" placeholder="请选择" style="width: 300px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        <span></span>
        <el-button type="primary" @click="accountadd">添加</el-button>
        <el-button type="primary" native-type="reset">重置</el-button>
      </p>
    </form>
  </div>
</template>

<script>
import { adduser } from "@/apis/users";
export default {
  data() {
    return {
      user: "",
      pwd: "",
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        },
      ],
      group: "普通管理员",
    };
  },
  created() {},
  methods: {
    accountadd() {
      adduser({
        account: this.user,
        password: this.pwd,
        userGroup: this.group,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "添加用户成功",
            type: "success",
          });
        } else {
          this.$message.error("添加用户失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.accountadd {
  h3 {
    padding: 20px 0;
  }
  p {
    display: flex;
    margin: 20px;
    span {
      width: 50px;
      margin-right: 30px;
      text-align: right;
    }
  }
}
</style>